    <template>
	<uni-nav-bar title="商品列表" @clickLeft="back" />
	<view class="category">
		<view class="nav">
			<scroll-view class="bg" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
				<view class="nav-item" :class="{'ac':active == index}" v-for="(item,index) in sort" :key="index"
					@click="changeNav(index,item.sortName)">
					{{item.sortName}}
				</view>
			</scroll-view>
		</view>
		<view class="goodsBox">
			<scroll-view scroll-y="true">
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in food" :key="index"
						@click="toDetail(item.productId)">
						<image :src="item.productAvatar" mode=""></image>
						<text>{{item.productName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<Footer></Footer>
</template>


<script>
	import Footer from '../../component/footer/footer.vue'
	export default {
		components: {
			Footer
		},
		data() {
			return {
				active: 0,
				scrollTop: 0,
				height: 0,
				sort: [],
				food: [],
				sortValue: "",
			}
		},
		onShow() {
			// 获取导航'.nav-item'的高度，在点击导航触发changeNav时，使其向下滚动

		},
		methods: {
			toDetail(id) {
				// console.log("开始页面跳转")
				uni.navigateTo({
					url: '/pages/product/productDetail?id=' + id
				})	
			},


			changeNav(index, sort) {
				this.active = index;
				this.scrollTop = this.height * (index - 2);
				// 在这里请求接口 展示右侧商品数据
				this.sortValue = sort

				//请求右侧商品数据
				uni.request({
					url: "http://localhost:9999/nbb/Product/getAllProduct",
					header: {
						'Authorization': uni.getStorageSync('Authorization'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {
						sort: this.sortValue
					},
					success: (res) => {
						if (res.data.code == 200) {
							// console.log("获取具体food");
							this.food = res.data.data
							// console.log(this.food)
						} else {
							// console.log("获取分类失败");
							// console.log(res.data);
						}
					},
					fail() {
						console.log("获取分类失败");
					}
				})
			},



			getSortDate() {
				uni.request({
					url: "http://localhost:9999/nbb/Sort/getAll",
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync('Authorization'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {},
					success: (res) => {
						if (res.data.code == 200) {
							// console.log("获取分类成功");
							this.sort = res.data.data
							// console.log(this.sort)
						} else {
							console.log("获取分类失败");
							console.log(res.data);
						}
					},
					fail() {
						console.log("获取分类失败");
					}
				})
			},
		},
		created() {
			this.getSortDate()
			this.changeNav(0,'热菜')
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-nav-bar-text {
		font-size: 20px;
	}

	.category {
		display: flex;
		position: absolute;
		width: 100%;
		height: calc(100% - var(--status-bar-height));

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		uni-scroll-view {
			height: 100%;
		}

		.bg {
			background: #F7F8F9;
		}

		.nav {
			width: 200rpx;

			.nav-item {
				width: 200rpx;
				height: 104rpx;
				line-height: 104rpx;
				background: #F7F8F9;
				font-size: 31rpx;
				color: #505660;
				text-align: center;
				position: relative;

			}

			.ac {
				color: #26A69A;
				font-size: 30rpx;
				background: #fff;
			}

			.ac:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 104rpx;
				background: linear-gradient(180deg, #26A69A 0%, #4DB6AC 100%);
				border-radius: 2rpx;
			}
		}

		.goodsBox {
			width: 550rpx;
			padding-left: 50rpx;

			.goods {
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;
				justify-content: space-around;
				flex-wrap: wrap;


				.goods-item {
					text-align: center;
					margin-bottom: 56rpx;
					margin-right: 45rpx;

					uni-image {
						display: block;
						width: 205rpx;
						height: 205rpx;
						margin: 0 auto 32rpx;
						border-radius: 10rpx;
					}

					uni-text {
						font-size: 30rpx;
						color: #505660;
					}
				}
			}
		}
	}
</style>